<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            position: relative; 
            height: 100vh;
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        .header{
            border: 1px solid black;
            height: 70px;
            width: 100%;
        }
        .center{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
            width: 100%;
        }

        .box{
            /* 先设置宽度，然后之后再重新修改宽度 */
            /* width: 1200px; */
            border: 1px solid black;
        }

        .first{
            background-color: #fff;
        }

        .firstChild1 {
            background-color: #ccc;
        }

        .firstChild1_box{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .firstChild1_box_center{
            display: flex;
        }

        .firstChild1_box_center .login{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(47, 43, 43);
            border: 1px solid black;
        }
        .firstChild1_box_center .login .card{
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 300px;
            background-color: gray;
        }

        .firstChild1_box_center .login .card .title{
            /* text-align: center; */
            margin: 20px;
        }

        .firstChild1_box_center .login .card .input{
            margin: auto;
            width: 200px;
            height: 18px;
            margin-bottom: 15px;
        }

        .firstChild1_box_center .login .card .button{
            margin: auto;
            width: 200px;
            margin-bottom: 20px;
        }

        
        .firstChild1_box_left{
            cursor: pointer;
            font-size: 30px;
            border: 1px solid black;
        }
        .firstChild1_box_right{
            cursor: pointer;
            font-size: 30px;
            border: 1px solid black;
        }


        .firstChild1_box_left:hover{
            background-color: #ccc;
        }

        .firstChild1_box_right:hover{
            background-color: #ccc;
        }

        .firstChild2{
            /* background-color: #c46e6e; */
        }

        .second{
            width: 100%;
            display: flex;
            margin: 20px auto;
            align-items: center;
        }
        .front{
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 35px;
            width: 1000px;
            border-bottom: 2px solid red;
        }
        .front .more{
            position: absolute;
            right: 0;
        }

        .end {
            margin: auto;
            width: calc(100% - 1200px);
            padding: 10px;
            background-color: rgb(37, 30, 30);
            color: red;
        }
        .second .front .a_link{
            display: flex;
            flex-direction: column;
            text-decoration: none;
            margin: auto 15px; 
        }

        .second .front .a_link:hover{
            border-bottom: 1px solid black;
        }

        .hot_recommend{
            font-size: 24px;
        }

        .thrid{
            width: 100%;
            display: flex;
            margin: 10px auto;
            align-items: center;
        }

        .thrid .front {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: flex-start;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .thrid .front > * {
            flex: 0 0 calc(25% - 15px);
            box-sizing: border-box;
        }

        .thrid .front .a_link {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #000;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.2s;
        }

        .thrid .front .a_link:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .thrid .front .a_link img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            display: block;
        }

        .thrid .front .a_link span {
            padding: 8px;
            font-size: 14px;
            line-height: 1.4;
            height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .thrid .front .a_link img {
            width: 100%;
            height: auto;
            display: block;
        }

        .thrid .front{
            border-bottom: none;
        }

        .footer{
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 70px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="content"></div>
    </div>
    <div class="center">
        <div class="box">
            <div class="first">
                <div class="firstChild1">
                    <div class="firstChild1_box">
                        <div class="firstChild1_box_left hover"><</div>
                        <div class="firstChild1_box_center">
                            <!-- 这里可以进行for循环 -->
                             <!-- <img src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62825130816/57e3/05be/dbaa/35ba17ba02d8485482440213c7bfb115.jpg?imageView&quality=89" alt=""> -->
                             <!-- <img src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62821641259/9168/ff56/496a/c8e1f7f69f747c564cc5b8a91c9dd9cf.jpg?imageView&quality=89" alt=""> -->
                             <div class="login">
                                <div class="card">
                                        <div class="title">登录</div>
                                        <input type="text" class="input" placeholder="用户名">
                                        <input type="password" class="input" placeholder="密码">
                                        <input type="submit" class="button">
                                </div>
                             </div>
                        </div>
                        <div class="firstChild1_box_right hover">></div>
                    </div>
                </div>
            </div>
            <div class="second ">
                <div class="front">
                    <div class="hot_recommend">热门推荐:</div>
                    <a href="" class="a_link">华语</a>
                    <span style="font-weight: 50;">|</span>
                    <a href="" class="a_link">流行</a>
                    <span style="font-weight: 50;">|</span>
                    <a href="" class="a_link">电子</a>
                    <a href="" class="more">更多</a>
                </div>
                <div class="end">
                    <div class="vip">黑胶vip会员</div>
                </div>
            </div>
            <div class="thrid">
                <div class="front">
                    <!-- <a href="" class="a_link">
                        <img src="https://p1.music.126.net/69UvJeww927sMtnjfwlO0Q==/1371091002111924.jpg?param=140y140" alt="【民谣盛宴】100首必听欧美民谣">
                        <span>【民谣盛宴】100首必听欧美民谣</span>
                    </a> -->
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
    <script>
        //定义数据
        const imgData = [
            {
                id: 1,
                imgSrc: "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62825130816/57e3/05be/dbaa/35ba17ba02d8485482440213c7bfb115.jpg?imageView&quality=89"
            },
            {
                id: 2,
                imgSrc: "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62821641259/9168/ff56/496a/c8e1f7f69f747c564cc5b8a91c9dd9cf.jpg?imageView&quality=89"
            },
            {
                id: 3,
                imgSrc: "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62801174495/263c/d484/615b/2fdf2104fd80a45b430fc4f4607fc3ac.jpg?imageView&quality=89"
            }
        ]
        let currentId = 0
        let currentData = imgData.slice(currentId,currentId+1)[0] //splice会改变原的数组
        const rootBox = document.querySelector('.firstChild1');
        rootBox.style.setProperty('--bg', `url(${imgData[0].imgSrc})`);
        rootBox.style.setProperty('--alpha', 1);
        console.log("currentId", currentId)
        console.log("imgData", imgData)
        console.log("currentData" , currentData)


        //添加图片的函数
        function changeImg(){
            console.log(currentId)
            currentData = imgData.slice(currentId,currentId+1)[0]

            console.log("currentData", currentData)
            const img = document.createElement("img")
            img.crossOrigin = "anonymous"; // ✅ 关键
            img.src = currentData.imgSrc
            img.dataset.id = currentData.id
            const firstChild1_box_center = document.querySelector(".firstChild1_box_center")
            const changeImgRoot = firstChild1_box_center.parentElement.parentElement.parentElement
            console.log("changeImgRoot",changeImgRoot)
            const login = document.querySelector(".login")

            //如何解决dom渲染次数错误?
            //可以先渲染图片之后再调整顺序
            firstChild1_box_center.innerHTML = ""
            firstChild1_box_center.append(img)
            firstChild1_box_center.append(login)

        }

        function slideshow() {
            setInterval(() => {
                currentId = (currentId + 1) % imgData.length; // 0→1→2→0 循环
                changeImg();
            }, 15000);
        }
       
        changeImg()
        slideshow()

        //点击按钮事件
        const firstChild1_box_left = document.querySelector(".firstChild1_box_left")
        const firstChild1_box_right = document.querySelector(".firstChild1_box_right")
        firstChild1_box_left.addEventListener("click", function(){
            console.log("left")
            if(currentId === 0){
                alert("已经是第一页了")
                return
            }
            currentId--;
            changeImg()

        })  
        firstChild1_box_right.addEventListener("click", function(){
            console.log(currentId)
            console.log("right")
            if(currentId === imgData.length -1){
                alert("已经是最后一页了")
                return
            }
            currentId++;
            changeImg()
        })
        

        //定义数据，定义热门推荐数据
        const hot_recommend_data = [
            {
                id: 0,
                imgSrc: "https://p1.music.126.net/69UvJeww927sMtnjfwlO0Q==/1371091002111924.jpg?param=140y140",
                title: "【民谣盛宴】100首必听欧美民谣",
                href: "https://music.163.com/#/playlist?id=311692545"
            },
            {
                id: 1,
                imgSrc: "https://p1.music.126.net/8g2Pn9Xw1m7cFhxOlc3BMg==/109951167875709379.jpg?param=140y140",
                title: "华语经典丨不容错过的神级Live现场",
                href: "https://music.163.com/#/playlist?id=311692545"
            },
                        {
                id: 1,
                imgSrc: "https://p1.music.126.net/6wq2s3Rtm8aJYvAoHKmgyA==/109951163202408350.jpg?param=140y140",
                title: "我爱你 第一句是假的 第二句也是假的",
                                href: "https://music.163.com/#/playlist?id=311692545"
            },
                        {
                id: 1,
                imgSrc: "https://p2.music.126.net/UAGZbbUF3VqoUtl1hEZRZw==/109951171947696852.jpg?param=140y140",
                title: "02.《不吼不叫》",
                                href: "https://music.163.com/#/playlist?id=311692545"
            },
                        {
                id: 1,
                imgSrc: "https://p1.music.126.net/Xd6h-xOoPj2yTUuQXOhyCQ==/18612532836990988.jpg?param=140y140",
                title: "粤语男声：我爱你依旧如初不曾改变",
                                href: "https://music.163.com/#/playlist?id=311692545"
            },
                        {
                id: 1,
                imgSrc: "https://p2.music.126.net/TV0bR12-ZuFQCBYYtBZF-A==/109951171477971151.jpg?param=140y140",
                title: "禁咒师 0001 开局卖肾",
                                href: "https://music.163.com/#/playlist?id=311692545"
            },
                        {
                id: 1,
                imgSrc: "https://p1.music.126.net/OQfrX2yq1QjvOWOTK3b_4g==/18936888765371604.jpg?param=140y140",
                title: "【节奏控】一听就上瘾的惊艳女声",
                                href: "https://music.163.com/#/playlist?id=311692545"
            },
                        {
                id: 1,
                imgSrc: "https://p2.music.126.net/mudwAnPP3TOzLEbEdYf6NQ==/109951171382674757.jpg?param=140y140",
                title: "【情蛊】同名主题曲《情蛊》—白翎&余夏",
                                href: "https://music.163.com/#/playlist?id=311692545"
            }
        ]

        //创建元素
        const thirdFront = document.querySelector(".thrid").querySelector(".front")
        hot_recommend_data.forEach((item,index)=>{
            const img = document.createElement("img")
            const span = document.createElement("span")
            const a = document.createElement("a")
            img.src = item.imgSrc
            span.innerText = item.title
            a.appendChild(img)
            a.appendChild(span)
            a.className = "a_link"
            a.href = item.href
            a.target = "__blank"
            thirdFront.appendChild(a)
        })
        
    </script>
</body>
</html>